<template>
  <div class="home">
    <aIndex v-if="system == 'A'" />
    <bIndex v-if="system == 'B'" />
    <cIndex v-if="system == 'C'" />
    <div class="panel3" v-if="system == 'A' || system == 'B'">
      <div class="container">
        <h4>
          <p class="zh">情报助手</p>
          <p class="en">INTELLIGENCE ASSISTANT</p>
        </h4>
        <dl class="effect">
          <dd
            v-for="(item, index) in effectOptions"
            :key="index"
            @click="toPage2(item)"
          >
            <div v-if="item.src" class="icon">
              <img :src="item.src" alt="" />
            </div>
            <div v-if="item.icon" class="icon2">
              <i :class="item.icon"></i>
            </div>
            <p class="tit">{{ item.title }}</p>
          </dd>
        </dl>
      </div>
    </div>
    <div class="panel4">
      <div class="container">
        <h4 class="h4">
          <p class="zh">相关网站</p>
          <p class="en">Related Websites</p>
        </h4>
        <div class="item-box">
          <h5>
            <img
              src="@/assets/img/home/news-logo.png"
              alt=""
              class="logo"
            /><span>相关网站</span>
          </h5>
          <dl>
            <dd v-for="(item, index) in outsideChain" :key="index">
              <p
                v-for="(citem, index2) in item"
                :key="index2"
                @click="toLink(citem)"
              >
                {{ citem.dictValue }}
              </p>
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <footer>
      <div class="copyright">
        <div>
          <span class="mr"
            >xxxx有限公司&nbsp;&nbsp;&nbsp;&nbsp;版权所有</span
          ><span
            >Copyright © 2019-<a
              target="_blank"
              href="https://beian.miit.gov.cn/"
              class="w mr"
              >京ICP备13002826号-19</a
            ></span
          ><span
            ><a target="_blank" href="static/mock/JOVE.pdf" class="w"
              >京ICP证140152号</a
            ></span
          >
        </div>
        <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010702001807"
          class="ba"
        >
          <img src="../../../assets/img/home/beian.png" class="img" /><span
            class="w"
            >京公网安备 11010702001807号</span
          ></a
        >
      </div>
    </footer>
  </div>
</template>

<script>
import aIndex from "./aIndex.vue";
import bIndex from "./bIndex.vue";
import cIndex from "./cIndex.vue";
export default {
  components: {
    aIndex,
    bIndex,
    cIndex,
  },
  data() {
    return {
      system: window.globalUrl.system || "B",
      effectOptions: [
        {
          title: "全球能源科技动态",
          router: "",
          href: "http://122.225.200.4:18020/dashboard",
          // src: require("@/assets/img/home/baogao.png"),
          icon: "el-icon-s-data",
          explain:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. ",
        },
        {
          title: "央企科技信息速览",
          router: "",
          url: `${window.globalUrl.url}p/#/Task/TaskList`,
          src: require("@/assets/img/home/fuwu.png"),
          explain:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. ",
        },
        {
          title: "电力科技查新系统",
          router: "",
          href: "http://ns.csee.org.cn/login",
          // src: require("@/assets/img/home/baogao.png"),
          icon: "el-icon-office-building",
          explain:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. ",
        },
        {
          title: "智慧芽",
          router: "",
          href: "https://account.zhihuiya.com/#/",
          // src: require("@/assets/img/home/fuwu.png"),
          icon: "el-icon-s-opportunity",
          explain:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. ",
        },
        {
          title: "中国知网",
          router: "",
          href: "https://www.cnki.net/",
          src: require("@/assets/img/home/gongju.png"),
          explain:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. ",
        },
        {
          title: "报告中心",
          router: "report",
          src: require("@/assets/img/home/baogao.png"),
          explain:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. ",
        },
        // {
        //   title: "工具助手",
        //   router: "",
        //   src: require("@/assets/img/home/gongju.png"),
        //   explain:
        //     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. ",
        // },
      ],
      outsideChain: [],
    };
  },
  created() {
    this.getDictAll();
  },
  methods: {
    // 获取相关网站字典数据
    getDictAll() {
      const data = JSON.parse(localStorage.getItem("allDict"));
      if (!data) {
        this.$Bus.$emit("showLoginDialog", true);
        return
      }
      const rw = data.find((list) => {
        return list.dictType == "related_websites";
      }).dataList;
      let res = [],
        resList = [];
      rw.forEach((list, index) => {
        resList.push(list);
        if ((index + 1) % 3 == 0) {
          res.push(resList);
          resList = [];
        }
      });
      if (resList.length > 0) {
        res.push(resList);
      }
      this.outsideChain = res;
      // console.log("res", res);
    },
    toLink(item) {
      window.open(item.dictLabel, "_blank");
    },
    // 情报助手跳转
    toPage2(item) {
      if (item.href) {
        window.open(item.href, "_blank");
        return
      }
      if (
        !this.$cookie.get("realName") ||
        this.$cookie.get("realName") === ""
      ) {
        this.$Bus.$emit("showLoginDialog", true);
        return;
      }
      if (item.url) {
        const homeUserInfo = JSON.parse(localStorage.getItem("homeUserInfo"));
        const userInfo = {
          access_token: this.$cookie.get("token"),
          menuList: [],
          userName: homeUserInfo.username,
        };
        localStorage.setItem("userInfo", JSON.stringify(userInfo));
        // this.$store.commit('setUserInfo', user);
        window.open(`${item.url}`, "_blank");
        return;
      }
      if (item.router !== "") {
        let url = this.$router.resolve({
          name: item.router,
        });
        window.open(url.href, "_blank");
      } else if (item.href) {
        window.open(item.href, "_blank");
      } else {
        this.$alert("此功能暂未开放", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  .panel3 {
    position: relative;
    background-color: $color110;
    .container {
      position: relative;
      width: 100%;
      padding: 0 2.8rem 0.46rem;
      box-sizing: border-box;
      h4 {
        position: relative;
        width: 100%;
        height: 0.56rem;
        margin-bottom: 0.5rem;
        text-align: center;
        p {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          // font-family: SourceHanSansCN-Bold;
          font-weight: normal;
          text-align: center;
        }
        .zh {
          z-index: 2;
          line-height: 0.57rem;
          margin-top: 0.22rem;
          font-size: 0.3rem;
          color: $color107;
        }
        .en {
          z-index: 1;
          line-height: 0.56rem;
          font-size: 0.53rem;
          text-transform: uppercase;
          color: rgba(146, 143, 152, 0.4);
        }
      }
      .effect {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 0.52rem;
        dd {
          width: calc((100% - 0.4rem) / 3);
          height: 1.46rem;
          margin-right: 0.2rem;
          margin-bottom: 0.2rem;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
          background-color: rgba(255, 255, 255, 0.1);
          transition: all 0.3s ease;
          cursor: pointer;
          &:nth-of-type(3n) {
            margin-right: 0;
          }
          &:hover {
            border-radius: 4px;
            // box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.5);
            // background-color: rgba(255,255,255,.5);
            background-color: rgba(255, 255, 255, 0.2);
            .tit {
              // color: $mainColor;
            }
          }
          .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 0.68rem;
            height: 0.68rem;
            margin: 0.18rem auto 0.05rem;
            background-color: $mainColor;
            img {
              width: 48%;
            }
          }
          .icon2 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 0.68rem;
            height: 0.68rem;
            margin: 0.18rem auto 0.05rem;
            background-color: $mainColor;
            i {
              font-size: 0.4rem;
              color: #fff;
            }
          }
          .tit {
            line-height: 0.48rem;
            text-align: center;
            // font-family: SourceHanSansCN-Medium;
            font-size: 0.2rem;
            transition: all 0.3s ease;
            color: $color107;
          }
          .explain {
            line-height: 0.2rem;
            padding: 0 0.2rem;
            font-size: 0.16rem;
            color: $color35;
          }
        }
      }
      .news {
        position: relative;
        display: flex;
        width: 100%;
        padding: 0.35rem 0.3rem;
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-sizing: border-box;
        .news-item {
          position: relative;
          // flex: 1;
          width: 50%;
          // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          &:nth-of-type(1) {
            padding-right: 0.19rem;
            border-right: 1px solid $color36;
          }
          &:nth-of-type(2) {
            padding-left: 0.19rem;
          }
          h5 {
            position: relative;
            margin-bottom: 0.18rem;
            // font-family: SourceHanSansCN-Medium;
            font-weight: normal;
            text-align: left;
            .logo {
              position: absolute;
              top: -0.08rem;
              left: 0;
              width: 0.45rem;
              height: 0.48rem;
            }
            span {
              display: inline-block;
              line-height: 0.42rem;
              padding-left: 0.46rem;
              // font-style: italic;
              font-size: 0.26rem;
              text-shadow: -2px 3px 3px rgba(80, 97, 203, 0.47);
              color: #929fff;
            }
          }
          .more {
            position: absolute;
            top: 0;
            right: 0.19rem;
            line-height: 0.42rem;
            font-size: 0.16rem;
            // color: $color99;
            color: $color39;
          }
          .wrap {
            width: 100%;
            height: calc(0.6rem * 6);
            overflow: hidden;
            ul {
              position: relative;
              li {
                display: flex;
                align-items: center;
                width: 100%;
                height: 0.6rem;
                border-bottom: 1px solid $color112;
                font-size: 0.18rem;
                &:hover {
                  .date,
                  .title {
                    color: $mainColor;
                  }
                }
                .title {
                  width: calc(100% - 1rem);
                  line-height: 0.42rem;
                  border-bottom: 0;
                  // font-family: SourceHanSansCN-Regular;
                  font-weight: normal;
                  color: $color111;
                  cursor: pointer;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                .date {
                  width: 1rem;
                  line-height: 0.42rem;
                  color: $color111;
                }
              }
            }
          }
        }
      }
    }
  }
  .panel4 {
    position: relative;
    background-color: $color110;
    .container {
      position: relative;
      width: 100%;
      padding: 0rem 2.8rem 1.46rem;
      box-sizing: border-box;

      .h4 {
        position: relative;
        width: 100%;
        height: 0.56rem;
        margin-bottom: 0.6rem;
        text-align: center;
        p {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          // font-family: SourceHanSansCN-Bold;
          font-weight: normal;
          text-align: center;
        }
        .zh {
          z-index: 2;
          line-height: 0.57rem;
          margin-top: 0.22rem;
          font-size: 0.3rem;
          color: $color107;
        }
        .en {
          z-index: 1;
          line-height: 0.56rem;
          font-size: 0.53rem;
          text-transform: uppercase;
          color: rgba(146, 143, 154, 0.4);
        }
      }

      .item-box {
        // background-color: rgba(255, 255, 255, 0.1);
        h5 {
          position: relative;
          margin-bottom: 0.18rem;
          // font-family: SourceHanSansCN-Medium;
          font-weight: normal;
          text-align: left;
          .logo {
            position: absolute;
            top: -0.08rem;
            left: 0;
            width: 0.45rem;
            height: 0.48rem;
          }
          span {
            display: inline-block;
            line-height: 0.42rem;
            padding-left: 0.46rem;
            // font-style: italic;
            font-size: 0.26rem;
            text-shadow: -2px 3px 3px rgba(80, 97, 203, 0.47);
            color: #a2adff;
          }
        }
        dl {
          position: relative;
          display: flex;
          padding-bottom: 0.2rem;
          dd {
            position: relative;
            width: calc(100% / 3);
            padding-left: 0.3rem;
            // border-right: 1px solid $color30;
            &:after {
              position: absolute;
              top: 0;
              right: 0;
              width: 1px;
              height: 100%;
              content: "";
              background-color: $color30;
            }
            &:nth-of-type(4n) {
              &:after {
                display: none;
              }
            }
            p {
              line-height: 0.4rem;
              padding-left: 0.2rem;
              // border-right: 1px solid $color30;
              font-size: 0.18rem;
              color: $color111;
              &:hover {
                text-decoration: underline;
                // color: $mainColor;
                color: $mainColor;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
  .copyright {
    // width: 100%;
    line-height: 0.63rem;
    // border-top: 1px solid $color44;
    font-weight: bold;
    // font-size: 14px;
    text-align: center;
    color: #fff;
    background-color: $color45;
    div {
      display: inline-block;
    }
    span {
      display: inline-block;
      &:nth-of-type(1) {
        margin-right: 20px;
      }
    }
    .mr {
      margin-right: 10px;
    }
    .w {
      color: #fff;
    }
    .ba {
      display: inline-block;
      text-decoration: none;
      height: 20px;
      line-height: 20px;
    }
    .img {
      float: left;
      margin: 0 10px;
    }
  }
}
</style>
